<template>
  <div>
    <div class="cover" v-if="isShow"></div>
    <transition
      @before-enter="handleBeforeEnter"
      @enter="handleEnter">
      <slot></slot>
    </transition>
  </div>
</template>

<script>
export default {
  /**
   *  .v-enter            @before-enter
   *  .v-enter-active     @enter
   *  .v-enter-to         @after-enter
   */
  data() {
    return {
      isShow: false,
    };
  },
  methods: {
    handleBeforeEnter() {
      this.isShow = true
    },
    handleEnter() {
      setTimeout(()=>{
          this.isShow = false
      },200)
    },
  },
};
</script>

<style scoped>
.v-enter-active {
  animation: animate 2s linear;
}
@keyframes animate {
  0% {
    opacity: 0;
    transform: translateY(0);
  }

  50% {
    opacity: 0.5;
    transform: translateY(20px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.cover {
  width: 100%;
  height: 100%;
  background-color: rgb(236, 236, 236);
  position: fixed;
  z-index: 100;
}
</style>